<template>
  <div class="component-allotMaterialList">
    <div class="component-mainHeader">
      <div class="top">
        <div class="topleft">
          <p>
            <span class="iconfont" style="color:#1abc9a;margin-right:3px;">&#xe607;</span>
            <span v-if="$route.params.loop==1" ><a @click="$router.go(-2)">库存</a> > <a  @click="$router.go(-1)"> 查看记录</a> >  退料入库信息 </span>
            <span v-else>退料入库信息</span>
          </p>
        </div>
        <div class="topright">
          <el-button type="info" @click="$router.go(-1)">
            <span style="font-weight:700;margin-right:5px;" class="iconfont">&#xe606;</span>返回
          </el-button>
        </div>
      </div>
    </div>
    <div  class="container">
      <div>
        <div class="table-title">
          <p>
            <span class="iconfont">&#xe607;</span> 材料入库信息
          </p>
          <div v-if="$route.params.flag==0" class="btn-group-right">
            <span @click="save">入库</span>
          </div>
        </div>
        <div class="tables">
          <table cellpadding="0" cellspacing="0" border="1">
            <tr>
              <td>入库单号</td>
              <td>
                <el-input v-model="table.formNo"></el-input>
              </td>
              <td>领料人</td>
              <td>
                <el-input v-model="table.responseUser"></el-input>
              </td>
            </tr>
            <tr>
              <td>退料施工方</td>
              <td>
                <el-input v-model="table.supplierName"></el-input>
              </td>
              <td>退料人</td>
              <td>
                <el-input v-model="table.consigner"></el-input>
              </td>
            </tr>
            <tr>
              <td>签收单据</td>
              <td style="height: 40px;">
                <div class="pictureLength">
                  <div style="cursor: pointer;" v-for="(item,index) in signdata" :key="index" @click="signDatas(item.fileUrl)">{{item.fileName}}</div>
                </div>
              </td>
              <td>退料日期</td>
              <td>
                <div>{{table.receiveDate | timeFilter}}</div>
              </td>
            </tr>
            <tr>
              <td>仓储位置</td>
              <td>
                <el-input v-model="table.toStoreid"></el-input>
                <!-- <el-select :disabled="write" v-model="table.toStoreid" clearable placeholder="请选择仓储位置" style="margin-left: -60px;width:320px;">
                   <el-option v-for="(item,index) in locationList" :key="index" :label="item.storeName" :value="item.storeId"></el-option>
                 </el-select>-->
              </td>
              <td>备注</td>
              <td>
                <el-input v-model="table.remark"></el-input>
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div style="margin-top:20px;">
        <div class="table-title table-titles">
          <p>
            <span class="iconfont">&#xe607;</span> 材料清单
          </p>
          <!--addmaterList-->
        </div>
        <div class="table armorlistTable">
          <el-table
            ref="multipleTable"
            tooltip-effect="dark"
            :data="materialList"
            style="width: 1100px;margin:0 auto"
            border
          >
            <el-table-column label="序号" align="center" width="70" type="index"></el-table-column>
            <el-table-column label="器材名称" align="center" prop="matName"></el-table-column>
            <el-table-column label="型号" align="center" prop="matModel"></el-table-column>
            <!--<el-table-column label="设备码" align="center" prop="deviceNum"></el-table-column>-->
            <el-table-column label="单位" align="center" prop="matUnit"></el-table-column>
            <el-table-column label="数量" align="center" prop="realNum"></el-table-column>
            <el-table-column label="单价" align="center" prop="price"></el-table-column>
            <el-table-column label="金额" align="center">
              <template slot-scope="scope">
                {{scope.row.realNum * scope.row.price}}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>

    <!--调拨材料文件录入-图片预览-->
    <div class="component-model">
      <el-dialog title="预览" :visible.sync="imgFlag" width="600px">
        <img v-if="signdata.length>0" :src="exe_img + signdata[0].fileUrl" style="max-width: 500px;">
      </el-dialog>
    </div>


  </div>
</template>

<script>
  export default {
    data() {
      return {
        myheader:{token:localStorage.getItem("token")},
        // 可编辑表格数据
        table:{},
        signdata:[],
        imgFlag:false,
        materialList:[],
        exe_img:img_url,//图片前缀
      };
    },
    mounted(){
        this.initDetail()
    },
    methods: {
      //从待退料入库点击 - 入库详情查询
      initDetail(){
        let that = this;
        let suCb = function(res){
          that.table = res.data.data.store || {};
          that.materialList = res.data.data.list;
          that.signdata =  res.data.data.signData||[];
          console.log(that.signdata,999)
        }
        let erCb = function(res){
          console.log(res)
        }
        let postData = {
          inId:that.$route.params.inId
        }
        let palyParam = {
          url: "/api/web/proInStore/getBillUpBlindExpandInStoreDetails",
          methods:'post',
          data: postData,
          success: suCb,
          error: erCb,
        }
        that.$https(palyParam)
      },
      //图片预览
      signDatas(){
        this.imgFlag = !this.imgFlag
      },
      //点击入库
      save(){

      }
    }
  };
</script>

<style scoped>
  .container {
    width: 1100px;
    margin: 30px auto;
  }
  .table-titles{
    overflow: hidden;
    background: #F3F3F3;
    border:1px solid #E4E4E4;
    border-bottom: none;
    padding: 0 10px;
  }
  .table-titles p:first-of-type{
    float: left;
  }
  .table-title p {
    font-family: "PingFangSC-Regular", "PingFang SC";
    font-weight: 400;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1;
    font-kerning: normal;
    font-size: 16px;
    color: #666;
    text-align: left;
    line-height: 40px;
  }

  .tables table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0;
    padding: 0;
    border: none;
    font-size: 12px;
  }
  .tables table td:nth-of-type(2n + 1) {
    text-align: right;
    padding-right: 20px;
    width: 140px;
    background: #f9fafc;
  }

  .table-title > div:last-of-type {
    float: right;
    margin: -45px 20px 10px;
  }
  .table-title > div:last-of-type span {
    display: inline-block;
    margin-left: 20px;
    padding: 5px 20px;
    margin-top: 10px;
    cursor: pointer;
    border-radius: 4px;
  }
  .table-title > div:last-of-type span:first-of-type {
    border: 1px solid #e4e4e4;
    color: #666;
    background: #fff;
  }
  .table-title > div:last-of-type span:last-of-type {
    border: 1px solid #1abc9c;
    color: #fff;
    background: #1abc9c;
  }

  .uploadBtn{
    height: 26px;
    line-height: 26px;
    margin: 7px;
    width: 90px;
    color: #1abc9c;
    border: 1px solid #1abc9c;
    background-color: #fff;
  }
  .uploadBtn:hover{
    color: #fff;
    background-color: #1abc9c;
  }
  a{
    color: #1ABC9C;
    cursor: pointer;
  }
  /* 弹窗样式 */
  .model-input {
    width: 190px;
    height: 10px;
    border: 1px solid #ccc;
    padding: 10px;
    color: #ccc;
  }

  .input-box {
    margin-bottom: 100px;
  }
  .search {
    width: 40px;
    height: 30px;
    border: 1px solid #ccc;
    border-left: none;
    line-height: 30px;
    background-color: #ccc;
  }
  .search:hover {
    cursor: pointer;
  }

  .radio-group {
    padding-top: 30px;
    padding-left: 30px;
  }

  .radio-group .el-radio {
    height: 30px;
  }

  .addpro {
    display: inline-block;
    width: 100px;
    height: 30px;
    line-height: 30px;
    border: 1px solid #ccc;
    background-color: #fff;
    color: #ccc;
  }
  .addpro:hover {
    cursor: pointer;
  }

  .upload:hover {
    cursor: pointer;
  }

  .btn-search {
    display: inline-block;
    float: right;
    width: 80px;
    height: 40px;
    background-color: #1abc9a;
    margin-top: 50px;
    color: #fff;
    border-radius: 5px;
    font-size: 15px;
    line-height: 40px;
  }
  .btn-search:hover {
    cursor: pointer;
  }

  .el-table .cell a {
    color: #1abc9a;
    text-decoration: none;
    cursor: pointer;
  }
  .checkbox{
    text-align: left;
    margin: 20px 0;
  }
  .component-paging .table-bottom{
    width: 102% !important;
    margin-top: 30px;
    border:none;
  }

</style>
